<template>
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="项目包分解" name="first"></el-tab-pane>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="flex search">
          <el-input v-model="input" placeholder="请输入"></el-input>
          <el-button type="success" plain>搜索</el-button>
          <el-popover
            placement="bottom"
            title="请选择筛选条件"
            width="500"
            trigger="click"
          >
            <el-row :gutter="20">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="dianya">电压等级 </el-option>
                  </el-select>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in searchList"
                      :key="index"
                      :value="item"
                      >{{ item }}
                    </el-option>
                  </el-select>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="110">110 </el-option>
                    <el-option value="220">220 </el-option>
                    <el-option value="500">500 </el-option>
                  </el-select>
                </div></el-col
              >
            </el-row>
            <el-row class="m-t-10" :gutter="20">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="dianya">电压等级 </el-option>
                  </el-select>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in searchList"
                      :key="index"
                      :value="item"
                      >{{ item }}
                    </el-option>
                  </el-select>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="110">110 </el-option>
                    <el-option value="220">220 </el-option>
                    <el-option value="500">500 </el-option>
                  </el-select>
                </div></el-col
              >
            </el-row>
            <el-row class="m-t-10" :gutter="20">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="dianya">电压等级 </el-option>
                  </el-select>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in searchList"
                      :key="index"
                      :value="item"
                      >{{ item }}
                    </el-option>
                  </el-select>
                  
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-select v-model="searchValue" placeholder="请选择">
                    <el-option value="110">110 </el-option>
                    <el-option value="220">220 </el-option>
                    <el-option value="500">500 </el-option>
                  </el-select>
                </div></el-col
              >
            </el-row>
            <div class="m-t-10 d-r btn">
              <el-button type="success">查询</el-button>
              <el-button type="success">重置</el-button>
            </div>
            <el-button class="m-l-30" slot="reference">高级筛选</el-button>
          </el-popover>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="m-t-10">
      <el-col :span="12" :offset="6">
        <el-tag
          class="m-l-5"
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+</el-button
        >
      </el-col>
    </el-row>
    <div class="m-t-10 flex l-h-30 companylist">
      所属公司:
      <!-- <span
        class="m-l-10 cur-p"
        v-for="(item, index) in companyList"
        :key="index"
        >{{ item }}</span
      > -->

      <el-radio-group class="m-l-30" v-model="radio2" size="medium">
        <el-radio-button
          v-for="(item, index) in companyList"
          :key="index"
          :label="item"
        ></el-radio-button>
      </el-radio-group>
    </div>
    <el-card class="box-card m-t-10">
      <div slot="header" class="clearfix">
        <span>电网基建计划清单</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="16" class="p-l-50">
          <p class="b-g">
            <i class="el-icon-warning f-c"></i>
            项目包：规模
            <span class="f-c f-w-b">362,000</span>
            万元，剩余规模
            <span class="f-c-cheng f-w-b">362，000</span>
            万元，业务包规模：
            <span class="f-c-cheng f-w-b">362,000</span>
            万元。本批计划分解：
            <span class="f-c-cheng f-w-b">724，000</span>
            万元，数量：
            <span class="f-c-cheng f-w-b">2</span>
            个
          </p>
        </el-col>
        <el-col :span="8"><div class="btnGroup">
          <el-button type="success" plain>项目包规模分解</el-button>
          <el-button type="success" plain>进入储备库</el-button>
          <el-button type="success" plain>移出</el-button>
          </div></el-col>
      </el-row>
    </el-card>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      class="m-t-10"
      header-row-class-name='{"background":"#ccc"}'
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" width="120">
        <template slot-scope="scope">{{ scope.row.num }}</template>
      </el-table-column>
      <el-table-column prop="name" label="单位名称" width="120">
      </el-table-column>
      <el-table-column prop="pronum" label="项目编码" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="proleibie" label="项目分类" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="dianya" label="电压等级" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="danwei" label="所属单位" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="leixing"
        label="项目管理类型"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="touzi" label="总投（万元）" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="jihua"
        label="当年计划（万元）"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="kaigong"
        label="计划开工时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="piwen" label="可研批复文" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div class="m-t-10 flex betwen">
      <span>共1000个每页10条</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      currentPage3: 5,
      radio2: "全部",
      input: "",
      activeName: "first",
      input3: "",
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      searchValue: "电压等级",
      searchList: [
        "小于",
        "等于",
        "大于",
        "不等于",
        "小于或等于",
        "大于或等于",
      ],
      companyList: [
        "全部",
        "国网长沙市电力公司1",
        "国网长沙市电力公司2",
        "国网长沙市电力公司3",
        "国网长沙市电力公司4",
        "国网长沙市电力公司5",
        "国网长沙市电力公司6",
        "国网长沙市电力公司7",
      ],
      tableData: [
        {
          num: "1",
          name: "电网基建项目",
          pronum: "18047309",
          proleibie: "上限",
          dianya: "110",
          danwei: "国网湖南电力公司",
          leixing: "项目管理",
          touzi: "1142",
          jihua: "1155",
          kaigong: "2020-1-1",
          piwen: "5201",
        },
        {
          num: "1",
          name: "电网基建项目",
          pronum: "18047309",
          proleibie: "上限",
          dianya: "110",
          danwei: "国网湖南电力公司",
          leixing: "项目管理",
          touzi: "1142",
          jihua: "1155",
          kaigong: "2020-1-1",
          piwen: "5201",
        },
        {
          num: "1",
          name: "电网基建项目",
          pronum: "18047309",
          proleibie: "上限",
          dianya: "110",
          danwei: "国网湖南电力公司",
          leixing: "项目管理",
          touzi: "1142",
          jihua: "1155",
          kaigong: "2020-1-1",
          piwen: "5201",
        },
        {
          num: "1",
          name: "电网基建项目",
          pronum: "18047309",
          proleibie: "上限",
          dianya: "110",
          danwei: "国网湖南电力公司",
          leixing: "项目管理",
          touzi: "1142",
          jihua: "1155",
          kaigong: "2020-1-1",
          piwen: "5201",
        },
      ],
      multipleSelection: [],
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.content {
  padding: 30px;
}
.flex {
  display: flex;
}
.m-t-10 {
  margin-top: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.d-r {
  text-align: right;
}
.m-l-30 {
  margin-left: 30px;
}
.m-l-10 {
  margin-left: 10px;
}
.cur-p {
  cursor: pointer;
}
.activeStyle {
  background-color: #ccc;
}
.p-l-50 {
  padding-left: 50px;
}
.f-c {
  color: #277f7b;
}
.l-h-30 {
  line-height: 30px;
}
.f-c-cheng {
  color: #ff753c;
}
.f-w-b {
  font-weight: bold;
}
.betwen{
  justify-content: space-between;
}
.b-g{
  background: #EEF5F5;
  padding: 10px 15px;
}
.companylist>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color: #277F7B;
  border-color:#277F7B;
  box-shadow:-1px 0 0 0 #277F7B;
}
.content>>>.el-tabs__item.is-active{
  color:#A4A4A4;
}
.content>>>.el-tabs__active-bar{
  background-color: #277F7B;
}
.search>>>.el-button--success.is-plain{
  background-color: #277F7B;
  color: #EEF5F5;
}
.srearch>>>.el-button{
  background: #277F7B;
}
.m-t-10>>>.el-tag{
  background-color: #F3F3F3;
  color: black;
  border: solid 1px #D9D9D9;
}
.m-t-10>>>.el-icon-close:before{
  color: black;
}
.m-t-10>>>.el-icon-close:hover{
color: black;
}
.btn>>>.el-button--success{
  background-color: #277F7B;
}
.btnGroup>>>.el-button--success.is-plain{
  background: #F7FFFD;
      color: #18615E;
    border-color: #9EC6C4;
}
</style>
